<template>
    <div class="pt44">
        <div class="content">
            <div class="plr15">申请金额(元)</div>
            <div class='tc b-b1'>
                <input id="inputAmount"  @input="inputAmount" @change="isShowTishi" v-bind:class="{input_amount:loanAmount!=''}" class="text-number weui-input tc placeholder" type="tel" v-bind:placeholder="this.lamPlaceholder">
            </div>
            <div v-show="showAmountTishi" class="weui_cell tishi">
                <div class="weui_cell_bd weui_cell_primary">
                    <p class="tar tc">金额错误,请输入{{this.$store.state.lowLimit}}-{{this.$store.state.upLimit}}</p>
                </div>
            </div>
            <div class="card_date-box">
                <div class="weui-cells StatementDateDiv">
                  <div @click="selectStatementDate" class="weui-cell StatementDate">
                    <div class="weui-cell__hd"><img v-bind:src="this.$store.state.imagesUrl + 'huankuanri_icon.png'" alt="" style="width:20px;margin-right:5px;display:block"></div>
                    <div class="weui-cell__bd">
                      <p>信用卡账单日</p>
                    </div>
                    <div id="statementDate" class="weui-cell__ft">{{statementDate}}</div>
                  </div>
                  <div @click="selectRepaymentDate" class="weui-cell b-b1 StatementDate">
                    <div class="weui-cell__hd"><img v-bind:src="this.$store.state.imagesUrl + 'zhangdanri_icon.png'" alt="" style="width:20px;margin-right:5px;display:block"></div>
                    <div class="weui-cell__bd">
                      <p>信用卡还款日</p>
                    </div>
                    <div id="repaymentDate" class="weui-cell__ft">{{accountreMonthpaymentDate}}</div>
                  </div>
                </div>
            </div>
        </div>
        <div class="count_box">
            <div class="weui-cells">
              <div class="weui-cell">
                <div class="weui-cell__bd">
                  <p>交易手续费</p>
                </div>
                <div class="weui-cell__ft">{{this.$store.state.accountServiceCharge}}</div>
              </div>
              <div class="weui-cell">
                <div class="weui-cell__bd">
                  <p>交易总额</p>
                </div>
                <div class="weui-cell__ft">{{this.$store.state.accountRepaymentAmount}}</div>
              </div>
              <div class="weui-cell">
                <div class="weui-cell__bd">
                  <p>交易还款日</p>
                </div>
                <div class="weui-cell__ft">{{this.$store.state.accountRepaymentDate}}</div>
              </div>
              <div class="weui-cell">
                <div class="weui-cell__bd">
                  <p>帮你延期天数</p>
                </div>
                <div class="weui-cell__ft">{{this.$store.state.loanDays}}</div>
              </div>

            </div>
        </div>
        <div id="agreement-box" class="agreement-box mt-15">
            <label for="agreement-check"><input type="checkbox" @change="changeNoToinfo" id="agreement-check" class="light" name="agreement" value="agreement" v-model="checked"><i>✓</i>
            我已阅读并同意</label>
            <router-link to="agreement/2" class="contract">《个人服务合同（二）》</router-link>
        </div>
        <div class="btn_box">
           <a @click="toinfo" href="javascript:;" v-bind:class="{'weui-btn_disabled':this.$store.state.accountNoToinfo}" class="weui-btn weui-btn_primary">下一步</a>
        </div>
        <DateDay></DateDay>
        <div class="js_dialog" v-show="big25">
            <div class="weui-mask"></div>
            <div class="weui-dialog replace-dialog">
                <div @click="closeReplace" class="close_cofirm"></div>
                <div class="replace_content">
                    <div class="weui-dialog__hd"><strong class="weui-dialog__title">提示</strong></div>
                    <div class="weui-dialog__bd">
                        <p class="prompt_replace">根据你的账单日，我们推荐您选择小通帮你借产品</p>
                        <div class="cf"><div class="bib fl"><a @click="clearStatementDate" href="javascript:;" class="weui-btn weui-btn_plain-primary small_font">换卡</a></div><div class="bib fr"><router-link to="/" class="weui-btn weui-btn_primary small_font">小通帮你借</router-link></div></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import cm from "../components/common.js";
export default  {

    name: 'interest',  // 组件利息计算
    data () {  // 数据
        return {
            msg: 'interest',
            dailyInterest:"",// 日利息
            maximumRepay:"0.00",
            loanAmount:"",  // 账期申请额
            serviceCharge:"",    // 账单手续费
            accountRepaymentAmount:"0.00",  // 账期还款额
            statementDate:"",   // 信用卡账单日
            nowDate:new Date(),
            loanDays:0,  // 借款天数
            big25: false,  // 账单日是否大于25
            noToinfo:true,
            checked: true,
            lamPlaceholder:"请输入金额600-50000",
            accountreMonthpaymentDate:"",
            showAmountTishi:false
        }
    },
    methods:{ // 自定义方法，可对data进行处理
        initValue(){
            this.checked = true;
            this.$store.state.accountLoanAmount = "";
            this.$store.state.accountNoToinfo = true;
            this.$store.state.statementDate = "";
            this.$store.state.accountRepaymentDate = "";
            this.$store.state.accountServiceCharge = "";
            this.$store.state.accountRepaymentAmount = "";
            this.$store.state.accountLoanDays = "";
            this.$store.state.loanDays = "";
            this.lastLoanAmount = "";
        },
        selectStatementDate() {
            this.$store.state.srDateId = "statementDate";
            $("#dataDay").attr("style","opacity: 1");
        },
        selectRepaymentDate() {
            this.$store.state.srDateId = "repaymentDate";
            $("#dataDay").attr("style","opacity: 1");
        },
        clearStatementDate(){
            this.big25 = false;
        },
        changeNoToinfo(){
            this.$store.state.accountChecked = this.checked;
            this.$store.commit('changeNoToinfo');

        },
        inputAmount(){
            var theloanAmount = $("#inputAmount").val();
            if(/^0\d/.test(theloanAmount)){
              theloanAmount = "0";
            }

            theloanAmount = theloanAmount.replace(/[^\d.]/g, ""); //清除"数字"和"."以外的字符
            theloanAmount = theloanAmount.replace(/^\./g, ""); //验证第一个字符是数字而不是
            theloanAmount = theloanAmount.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的
            theloanAmount = theloanAmount.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
            theloanAmount = theloanAmount.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3'); //只能输入两个小数
            this.loanAmount = theloanAmount;
            $("#inputAmount").val(this.loanAmount);
            if(this.loanAmount != ""){
                this.$store.state.accountLoanAmount = this.loanAmount;
            }else{
                this.$store.state.accountLoanAmount = 0.00;
            }
            this.changeNoToinfo();
            this.$store.commit('accountRepaymentAmountFunc')
            this.hideTishi();
        },

        toinfo(){
            if(this.$store.state.accountLoanDays > 25){
                this.big25 = true;
            }else if(!this.checked){
                this.$store.state.errorMsg = "请阅读并同意协议";
            }else if(this.$store.state.accountLoanAmount == "" || this.$store.state.accountLoanAmount<this.$store.state.lowLimit || this.$store.state.accountLoanAmount> this.$store.state.upLimit){
                this.$store.state.errorMsg = this.lamPlaceholder;

            }else if(this.$store.state.statementDate ==""){
                this.$store.state.errorMsg = "请选择信用卡账单日";
            }else if(this.$store.state.accountreMonthpaymentDate == ""){
                this.$store.state.errorMsg = "请选择信用卡还款日";
            }else{
                location.hash="#/info";
            }
        },
        closeReplace(){
            this.big25 = false;
        },
        isShowTishi(){
            if(parseFloat(this.loanAmount) < this.$store.state.lowLimit || parseFloat(this.loanAmount) > this.$store.state.upLimit){
                this.showAmountTishi = true;
            }else{
                this.showAmountTishi = false;
            }
        },
        hideTishi(){
            if(parseFloat(this.loanAmount) >= this.$store.state.lowLimit && parseFloat(this.loanAmount) <= this.$store.state.upLimit){
                this.showAmountTishi = false;
            }
        }
    },
    beforeMount(){
//        this.initValue();
        this.$store.state.channelNo = "02";

        this.accountreMonthpaymentDate = this.$store.state.accountreMonthpaymentDate==""?"请选择":this.$store.state.accountreMonthpaymentDate;
        this.statementDate = this.$store.state.statementDate==""?"请选择":this.$store.state.statementDate;
        this.$store.commit("getLimit","02");
    },
    mounted() {
        this.$store.commit("getRate");
        this.$store.commit('changeTitle','小通帮你延');
        if(this.$store.state.accountLoanAmount){
            this.loanAmount = this.$store.state.accountLoanAmount;
            $("#inputAmount").val(this.loanAmount);
        }

        var _this = this;
        setTimeout(function () {
            _this.lamPlaceholder = "请输入金额" + _this.$store.state.lowLimit + "-" + _this.$store.state.upLimit
        },800);
        var isIphone = cm.ismobile();
        if(isIphone == "0"){
          $("#inputAmount").attr("type","number");
        }
    },
    beforeRouteUpdate(to, from, next){

        if(from.name != "Agreement"){
            this.initValue();
        }
        next();
    }

}
</script>

<style lang='scss' scoped>
@import "../assets/scss/vendors/weui-sass/src/style/base/mixin/_setOnepx";
@import "../assets/scss/_agreeBox";
.content{
    color: #fff;
    font-size: 17px;
    background-color: #2792e4;
    padding-bottom: 40px;
    position: relative;
    .card_date-box{
        color:#222;
        width: 90%;
        margin-left: 5%;
        position: absolute;
        z-index: 9;
        padding: 0px 0 20px 0;
        bottom: -80px;
        background-color: #fff;
        box-shadow: 0 5px 5px -4px #cacaca;
    }
}
div.tc{
    width: 65%;
    left: 17.5%;
    margin-bottom: 25px;
}
.b-b1{
    position: relative;
    &:after{
        @include setBottomLine();
        left: 15px;
        right: 15px;
        bottom: 0px;
    }

    >input.tc{
        margin-top: 30px;
        color:#fff;
//        font-size: 17px;
    }
    >input.input_amount{
        font-size: 35px;
        color: #fff;
    }
}
.StatementDateDiv{
    margin-top: 0;
}
.StatementDate{
    padding: 17px 15px 10px 15px;
}
.count_box{
    >.weui-cells{
        margin-top: 0;
        padding-top: 90px;
    }
}
.weui-cell__bd{
    >.text-number{
        font-size: 35px;
    }
}
.repay_title{
    padding-left: 15px;
}
.weui-flex{
   margin-top: 35px;
   padding-bottom: 15px;
}
.weui-flex__item{


    &:first-child{
       &:after{height:0}
    }
    .placeholder{


        position: relative;
        text-align: center;
        width: 100%;
        >div{
            margin: auto;
        }
        >div.cost_statement{
            font-size: 12px;
            color: rgba(255, 255, 255, 0.54);
            margin: 5px 0 8px 0;
        }
    }
    .placeholder:nth-child(1){
        &:after{
            @include setLeftLine();
            height: 80%;
            margin-top: 5%;
        }
    }

}

.daily_interest{
    background-image: url('/FuLiBao/Lenovo/static/images/rilixi_icon_44px.png');
//    background-image: url('/static/images/rilixi_icon_44px.png');
}
.maximum-repay{
    background-image: url('/FuLiBao/Lenovo/static/images/zuidahuankuan_icon_50-x-44px.png');
//    background-image: url('/static/images/zuidahuankuan_icon_50-x-44px.png');
}
.freeze{
    background-image: url('/FuLiBao/Lenovo/static/images/dongjiejine_icon_32-X44-px.png');
//    background-image: url('/static/images/dongjiejine_icon_32-X44-px.png');
}
.repay-img{
    width:22px;
    height:22px;
    background-size: 100%;
}
.mt-15{
    margin: 15px 0 15px 15px;
}
.prompt_replace{
    text-align: left;
    line-height: 35px;
    margin-bottom: 20px;
    color: #000;
    font-size: 17px;
}
.bib{
    display: inline-block;
    width: 47%;
}
.cf{
    &:after{
        clear: both;
        content:" ";
        display: block;
    }
}
.fl{
    float: left;
}
.fr{
    float: right;
}
.close_cofirm{
    width:35px;
    height:35px;
    background-image: url('/FuLiBao/Lenovo/static/images/guanbi_icon.png');
//    background-image: url('/static/images/guanbi_icon.png');
    background-size: 100%;
    position: absolute;
    right: 0px;
    top: 9px;
}
.replace-dialog{
    background: transparent;
    padding: 17px;
}
.replace_content{
    background: #fff;
}
.small_font{
    font-size:12px;
}

.tishi{
    color:#da1717;
}
@mixin placeholder {
  ::-webkit-input-placeholder {@content}
  :-moz-placeholder           {@content}
  ::-moz-placeholder          {@content}
  :-ms-input-placeholder      {@content}
}
@include placeholder {
    color: white;
}
</style>
